<template>
    <div class="info-content">
        <el-form label-width="90px">
            <el-form-item label="页面标题">
                <el-input v-model="list.title"></el-input>
            </el-form-item>
            <!-- <el-form-item label="页面备注">
                <el-input type="textarea" :rows="4" v-model="list.remarks"></el-input>
            </el-form-item> -->
            <el-form-item label="字体颜色">
                <div style="display: flex;align-items: center;">
                    <el-color-picker v-model="list.FontColor" show-alpha></el-color-picker>
                    <el-button style="margin-left: 20px;" type="primary" size="small" @click="()=>{list.FontColor ='#000'}">重置</el-button>
                </div>
            </el-form-item>
            <el-form-item label="头部颜色">
                <div style="display: flex;align-items: center;">
                    <el-color-picker v-model="list.NavColor" show-alpha></el-color-picker>
                    <el-button style="margin-left: 20px;" type="primary" size="small" @click="()=>{list.NavColor ='#fff'}">重置</el-button>
                </div>
            </el-form-item>
            <!-- <el-form-item label="头部透明度">
                <el-slider v-model="list.Opacity" :max="1" :min="0" :step="0.1"></el-slider>
                <div style="color: #999;">* 1 为不透明,0 是全透明</div>
            </el-form-item> -->
            <!-- <el-form-item label="是否固定">
                <el-switch v-model="list.isFlex">
                </el-switch>
                <div style="color: #999;">* 固定会盖住内容,根据需求使用</div>
            </el-form-item> -->
            <!-- <el-form-item label="页面颜色">
                <div style="display: flex;align-items: center;">
                    <el-color-picker v-model="list.backgroundColor" show-alpha></el-color-picker>
                    <el-button style="margin-left: 20px;" type="primary" size="small" @click="()=>{list.backgroundColor ='#f5f5f5'}">重置</el-button>
                </div>
            </el-form-item> -->
        </el-form>
    </div>
</template>

<script>
    export default {
        name: 'Info',
        props: ['data'],
        data() {
            return {
                list: {}
            }
        },
        mounted() {
            // console.log(this.data);
            this.list = this.data
        }
    }
</script>

<style lang="less" scoped>
    .info-content {
        padding: 20px;
        overflow-y: auto;
    }
</style>